import React, { useEffect, useState } from 'react';
import '../../css/lmy/Lmy.css'
import { LeftOutline ,PhoneFill,AudioFill,MessageOutline,CheckOutline} from 'antd-mobile-icons'
import store from '../../redux';
import { useNavigate } from 'react-router-dom';
function App() {
    const navigator = useNavigate()
    const [messages, setMessages] = useState([]);
    const [input, setInput] = useState('');
    const [ws, setWs] = useState(null);
    useEffect(() => {
        // 连接到 WebSocket 服务器
        const websocket = new WebSocket('ws://192.168.88.25:8080'); // 替换为服务器的 IP 地址

        websocket.onopen = () => {
            console.log('WebSocket Client Connected');
        };

        websocket.onmessage = (event) => {
            setMessages(prevMessages => [...prevMessages, event.data]);
        };
        
        setWs(websocket);

        return () => {
            websocket.close();
        };
    }, []);

    const sendMessage = (event) => {
        event.preventDefault();
      
        if (input && ws) {
            ws.send(input);
            setInput('');
        }
       
        
        setMessages(prevMessages => [...prevMessages, input]);
    };
    useEffect(()=>{
        console.log(store.getState());
        
    },[])
    // 192.168.43.179
    return (
        <div>
            <div className='lheader'> 
                <div>
                    <p><LeftOutline onClick={()=>{
                        history.back()
                    }}/>&nbsp;王小小</p>
                </div>
                <div>
                <PhoneFill onClick={()=>{
                    navigator('/tar/xiaoxi/dian')
                }}/>&nbsp;<MessageOutline />
                </div>
            </div>
            <div className='lmybox'>
                <div className='aas'>
                      {messages.map((msg, index) => (
                    <div className='aa' key={index}>
                        <span className='aadd'>
                            {msg}
                        </span>
                    </div>
                ))}
                </div>
              
            </div>
            <div className='lsub'>
                <form onSubmit={sendMessage}>
                <input 
                    type="text" 
                    value={input} 
                    className='inputt'
                    onChange={(e) => setInput(e.target.value)} 
                    placeholder="请输入..." 
                />
                <button type="submit" className='lmybtn'>发送</button>
                
            </form>
            </div>
            
            
        </div>
    );
}

export default App;